{extend name="../app/index/view/layout/main.html" /}
//网站标题
{block name="title"}<title>{$model.showName} - {$meta.appname}</title>{/block}

//css资源
{block name="link"}
<!-- 第三方库css -->
<link rel="stylesheet" href="__STATIC__/lib/layui/css/layui.css">
<link rel="stylesheet" href="__STATIC__/lib/swiper/css/swiper.css">

<!-- 自定义css -->
<link rel="stylesheet" href="__INDEX_STATIC__/css/common.css">
<link rel="stylesheet" href="__INDEX_STATIC__/css/app.css">
<style>
  .author-box .author-avatar{
      width: 130px;
      height: 130px;
  }
  .author-box .author-avatar img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border:2px solid #eee;
  }
  .author-box .author-info{
    color: #666666!important;
  }
  .author-box .author-info h3{
    font-size: 18px;
  }
  .author-box .author-count{
    margin-top: 8px;
  }
</style>
{/block}


//js资源
{block name="script"}
<script id="postsTpl" type="text/html">
  {{#  layui.each(d, function(index, item){ }}
  <li class="post-item">
    <div class="user-info">
      <a href="{{ item.authorUrl }}"><img class="avatar" src="{{ item.avatar }}"></a>
      <div class="user-profile">
        <span class="user-name">{{ item.username }}</span>
        ·
        <span class="post-time">{{ item.absoluteTime }}</span>
      </div>
    </div>

    <div class="post-body">
      <div class="post-left">
        <div class="post-info">
          <span><a class="cat" href="{{ item.categoryUrl }}">{{ item.category_name }}</a></span>
          {{#  if(item.topic_id){ }}
          <span><a class="top" href="{{ item.topicUrl }}">{{ item.topic_name }}</a></span>
          {{#  } }}
        </div>
        <h3 class="post-title">
          <a href="{{ item.articleUrl }}">{{ item.title }}</a>
        </h3>
        <p class="layui-hide-xs">{{ item.brief }}</p>
        <div class="post-like">
          <span><i class="layui-icon layui-icon-rate"></i>  {{ item.liked }}</span>
          <span><i class="layui-icon layui-icon-chat"></i>  {{ item.commented }}</span>
        </div>
      </div>
      {{#  if(item.imageUrl){ }}
      <div class="post-right">
        <img src="{{ item.imageUrl }}" class="heightsuit">
      </div>
      {{#  } }}
    </div>
  </li>
  {{#  }); }}
  {{#  if(d.length === 0){ }}
  无数据
  {{#  } }}
</script>
<script src="__STATIC__/lib/layui/layui.js"></script>
<script src="__INDEX_STATIC__/js/config.js"></script>
<script>
    'use strict';
    layui.use(['layer', 'jquery', 'nav','posts'], function(){
        var layer = layui.layer
            ,$ = layui.jquery
            ,posts = layui.posts;


        //分页
        posts.setFields({
            user_id:"{$model.id}",
        })
        .init({
            pageElem : $('#pagination')[0],
            count: "{$count}",
            limit : "{$limit}",

            box: $('#post_box')[0],
            url: "{:url('article/list')}",
            tpl: $('#postsTpl').html()
        });

    });
</script>
{/block}

//body
{block name="body"}
<!-- body -->
<section class="body top-25">
  <div class="layui-container">
    <div class="layui-row layui-col-space20">
      <!-- left -->
      <div class="layui-col-md3">
        <!-- subscribe -->
        <div class="subscribe-tab">
          <div class="subscribe-header">
            <h2 class="subscribe-tab-title">{$date.date}</h2>
            <div class="subscribe-tab-time">
              <span>{$date.en_date}</span>
              <span>{$date.cn_date}</span>
            </div>
          </div>
          <div class="subscribe-footer">
            <p>共订阅2个媒体<i class="layui-icon layui-icon-right"></i></p>
          </div>
        </div>
      </div>
      <!-- center -->
      <div class="layui-col-md6">
        <div class="block">

          <!-- posts -->
          <div class="posts top-25">
            <div class="block-header flex-def flex-zBetween">
              <h2><i class="layui-icon layui-icon-read best-icon"></i> 最新文章</h2>
            </div>

            <!-- post list -->
            <ul id="post_box"></ul>
          </div>

          <!-- pager -->
          <div id="pagination" class="flex-def flex-zCenter top-25">
            <div id="pager"></div>
          </div>

        </div>
      </div>
      <!-- right -->
      <div class="layui-col-md3">
        <!-- author -->
        <div class="block author-box flex-def flex-zTopBottom flex-cCenter">
          <div class="author-avatar">
            <img src="{$model.avatarUrl}">
          </div>
          <div class="author-info flex-def flex-cCenter flex-zTopBottom top-25">
            <h3><i class="layui-icon layui-icon-username"></i>{$model->showName}</h3>
            <div class="author-count">
              <span>文章 : {$count}</span>
              <span>话题 ：{$topic_count}</span>
            </div>
          </div>
        </div>

        <!-- 订阅 -->
        <div class="block top-25 medium-card">
          <div class="block-header">
            <h2>作者话题</h2>
            <a href="{:url('topic/index',['user_id'=>$model.id])}" class="more">
              更多
              <i class="layui-icon layui-icon-right"></i>
            </a>
          </div>
          {if empty($topic_list)}无数据{/if}
          {foreach $topic_list as $k => $v}
          <div>
            <div class="medium-top">
              <div>
                <img src="{$v.imageUrl}">
                <a href="{:url('topic/read', ['id'=>$v.id])}"><h3>{$v.name}</h3></a>
              </div>
              <a  href="javascript:;" class="focus">订阅</a>
              <!--<a class="unfocus" href="javascript:;">已订阅</a>-->
            </div>
            <div class="medium-bottom">
              {$v.desc}
            </div>
          </div>
          {/foreach}

        </div>

        <!-- 作者 -->
        <div class="block author top-25">
          <div class="block-header">
            <h2>推荐作者</h2>
            <a href="javascript:;" class="more">
              更多
              <i class="layui-icon layui-icon-right"></i>
            </a>
          </div>
          <div class="author-wrap">
            <ul>
              {if empty($activeAuthors)}无数据{/if}
              {foreach $activeAuthors as $item}
              <li class="author-item">
                <a class="avatar" href="{:url('user/read',['id'=>$item.id])}"><img src="{$item.avatarUrl}" alt=""></a>
                <div class="author-info">
                  <h3>{$item.showName}</h3>
                  <p>文章 {$item.articles_count}, 话题 {$item.topics_count}</p>
                </div>
              </li>
              {/foreach}
            </ul>
          </div>
        </div>

      </div>
    </div>
  </div>
</section>
{/block}
